<template>
  <a-modal title-align="start" title="批量修改标题和描述" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="800">
    <a-tabs v-model:active-key="form.curTab" @change="tabChange">
      <a-tab-pane key="1" title="修改标题"> </a-tab-pane>
      <a-tab-pane key="2" title="修改描述"> </a-tab-pane>
      <a-tab-pane key="3" title="修改简短描述"> </a-tab-pane>
    </a-tabs>
    <div class="mt10">
      <a-radio-group v-model="form.replaceType">
        <a-radio value="A">替换关键词</a-radio>
        <a-radio value="B">直接覆盖</a-radio>
      </a-radio-group>
    </div>
    <!-- 是替换还是直接覆盖，覆盖不需要替换内容啥的 -->
    <div v-if="form.curTab === '1'">
      <div v-if="form.replaceType === 'A'">
        <div class="mt10" style="width: 100%">
          <a-space>
            <div class="required">查找内容：</div>
            <a-input style="width: 600px" v-model="form.searchText" />
          </a-space>
        </div>
        <div class="mt10" style="width: 100%">
          <a-space>
            <div class="required">替换内容：</div>
            <a-input style="width: 600px" v-model="form.replaceText" />
          </a-space>
        </div>
      </div>
      <div v-else class="mt10" style="width: 100%">
        <div class="required">输入新的标题：</div>
        <a-input style="width: 600px" v-model="form.newTitle" />
      </div>
    </div>

    <!-- 不同tab展示输入的形式不一样 -->
    <div v-if="form.curTab === '2'">
      <div v-if="form.replaceType === 'A'">
        <div class="mt10" style="width: 100%">
          <a-space>
            <div class="required">查找内容：</div>
            <a-input style="width: 600px" v-model="form.searchText" />
          </a-space>
        </div>
        <div class="mt10" style="width: 100%">
          <a-space>
            <div class="required">替换内容：</div>
            <a-input style="width: 600px" v-model="form.replaceText" />
          </a-space>
        </div>
      </div>
      <div v-else class="mt10" style="width: 100%">
        <div class="required">输入新的描述：</div>
        <editor v-model="form.desc" :height="300" />
      </div>
    </div>
    <div v-if="form.curTab === '3'">
      <div v-if="form.replaceType === 'A'">
        <div class="mt10" style="width: 100%">
          <a-space>
            <div class="required">查找内容：</div>
            <a-input style="width: 600px" v-model="form.searchText" />
          </a-space>
        </div>
        <div class="mt10" style="width: 100%">
          <a-space>
            <div class="required">替换内容：</div>
            <a-input style="width: 600px" v-model="form.replaceText" />
          </a-space>
        </div>
      </div>
      <div v-else class="mt10" style="width: 100%">
        <div class="required">输入新的简短描述：</div>
        <editor v-model="form.shortDesc" :height="300" :excludeKeys="['group-image', 'group-video', 'insertTable', 'codeBlock', 'emotion']" />
      </div>
    </div>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { onMounted, ref, computed } from 'vue'
  import editor from '@/components/wangeditor/editor.vue'
  import { Message } from '@arco-design/web-vue'
  import { versionBatchUpdate } from '@/api/product'
  import _ from 'lodash-es'
  let props = defineProps(['modelValue', 'shopId', 'ids', 'list'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let form = ref({
    curTab: '1',
    replaceType: 'A',
    searchText: '',
    replaceText: '',
    newTitle: '',
    desc: '',
    shortDesc: '',
  })

  const replaceStr = (searchText: string, replaceText: string, nameText: string) => {
    let regex = new RegExp(searchText, 'g') // 创建正则表达式
    let newStr = nameText.replace(regex, replaceText)
    return newStr
  }

  const submit = async () => {
    if (form.value.replaceType == 'A' && !form.value.searchText) return Message.error('请输入要查找的内容')
    if (form.value.replaceType == 'A' && !form.value.replaceText) return Message.error('请输入要替换的内容')
    if (form.value.curTab == '1' && form.value.replaceType == 'B' && !form.value.newTitle) return Message.error('请输入新的标题')

    // let params: any = {
    //   param: {
    //     update: [],
    //   },
    //   shopId: props.shopId,
    // }
    // let arr = _.cloneDeep(props.ids)
    // arr.forEach((e: any) => {
    //   if (form.value.replaceType == 'A') {
    //     switch (form.value.curTab) {
    //       case '1':
    //         e.name = replaceStr(form.value.searchText, form.value.replaceText, e.name)
    //         params.param.update.push({ id: e.id, name: e.name })
    //         break
    //       case '2':
    //         e.description = replaceStr(form.value.searchText, form.value.replaceText, e.description)
    //         params.param.update.push({ id: e.id, name: e.description })
    //         break
    //       case '3':
    //         e.short_description = replaceStr(form.value.searchText, form.value.replaceText, e.short_description)
    //         params.param.update.push({ id: e.id, name: e.short_description })
    //         break
    //     }
    //   } else {
    //     switch (form.value.curTab) {
    //       case '1':
    //         e.name = form.value.newTitle
    //         params.param.update.push({ id: e.id, name: e.name })
    //         break
    //       case '2':
    //         e.description = form.value.desc
    //         params.param.update.push({ id: e.id, description: e.description })
    //         break
    //       case '3':
    //         e.short_description = form.value.shortDesc
    //         params.param.update.push({ id: e.id, short_description: e.short_description })
    //         break
    //     }
    //   }
    // })

    let newList = _.cloneDeep(props.list)
    newList.forEach((e: any) => {
      if (form.value.replaceType == 'A') {
        switch (form.value.curTab) {
          case '1':
            e.dataFromRestApi.name = replaceStr(form.value.searchText, form.value.replaceText, e.dataFromRestApi.name)
            break
          case '2':
            e.dataFromRestApi.description = replaceStr(form.value.searchText, form.value.replaceText, e.dataFromRestApi.description)
            break
          case '3':
            e.dataFromRestApi.short_description = replaceStr(form.value.searchText, form.value.replaceText, e.dataFromRestApi.short_description)
            break
        }
      } else {
        switch (form.value.curTab) {
          case '1':
            e.dataFromRestApi.name = form.value.newTitle
            break
          case '2':
            e.dataFromRestApi.description = form.value.desc
            break
          case '3':
            e.dataFromRestApi.short_description = form.value.shortDesc
            break
        }
      }
    })

    let res: any = null
    res = await versionBatchUpdate({ createOrUpdateDocList: newList })
    // const res: any = await batchProduct(params)
    if (res) {
      Message.success('修改成功')
      showvisible.value = false
      emits('save')
    }
  }

  const tabChange = () => {
    console.log(2)

    form.value.replaceType = 'A'
    form.value.searchText = ''
    form.value.replaceText = ''
    form.value.newTitle = ''
    form.value.desc = ''
    form.value.shortDesc = ''
  }

  onMounted(() => {
    console.log(props.list)
  })
</script>

<style lang="less" scoped></style>
